---
title: Getting Started
---

import { Step, Steps } from "fumadocs-ui/components/steps";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";

## Start with a new project

![animated gif showing the steps to create a new project](../../../../.github/assets/assistant-ui-starter.gif)

<Steps>
  <Step>

### Initialize assistant-ui in your project

Step 1: Run `assistant-ui init` to install assistant-ui in a new or existing React.js project:

```sh
npx assistant-ui@latest create # new project
npx assistant-ui@latest init # existing project
```

  </Step>
  <Step>

### Add API key

Add a new `.env` file to your project with your OpenAI API key:

```
OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# chat history -- sign up for free on https://cloud.assistant-ui.com
# NEXT_PUBLIC_ASSISTANT_BASE_URL="https://..."
```

  </Step>
  <Step>

### Start the app

```sh
npm run dev
```

  </Step>
</Steps>

## Install in an existing app

<Steps>
  <Step>

### Add assistant-ui

```sh npm2yarn
npx shadcn@latest add "https://r.assistant-ui.com/thread"
```

  </Step>
  <Step>

### Setup Backend Endpoint

Install provider SDK:

<Tabs id="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>

```sh title="Terminal" tab="OpenAI"
npm install ai @assistant-ui/react-ai-sdk @ai-sdk/openai
```

```sh title="Terminal" tab="Anthropic"
npm install ai @assistant-ui/react-ai-sdk @ai-sdk/anthropic
```

```sh title="Terminal" tab="Azure"
npm install ai @assistant-ui/react-ai-sdk @ai-sdk/azure
```

```sh title="Terminal" tab="AWS"
npm install ai @assistant-ui/react-ai-sdk @ai-sdk/amazon-bedrock
```

```sh title="Terminal" tab="Gemini"
npm install ai @assistant-ui/react-ai-sdk @ai-sdk/google
```

```sh title="Terminal" tab="GCP"
npm install ai @assistant-ui/react-ai-sdk @ai-sdk/google-vertex
```

```sh title="Terminal" tab="Groq"
npm install ai @assistant-ui/react-ai-sdk @ai-sdk/openai
```

```sh title="Terminal" tab="Fireworks"
npm install ai @assistant-ui/react-ai-sdk @ai-sdk/openai
```

```sh title="Terminal" tab="Cohere"
npm install ai @assistant-ui/react-ai-sdk @ai-sdk/cohere
```

```sh title="Terminal" tab="Ollama"
npm install ai @assistant-ui/react-ai-sdk ollama-ai-provider
```

```sh title="Terminal" tab="Chrome AI"
npm install ai @assistant-ui/react-ai-sdk chrome-ai
```

</Tabs>

Add an API endpoint:

<Tabs id="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
```ts title="/app/api/chat/route.ts" tab="OpenAI"
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai("gpt-4o-mini"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="Anthropic"
import { anthropic } from "@ai-sdk/anthropic";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: anthropic("claude-3-5-sonnet-20240620"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="Azure"
import { azure } from "@ai-sdk/azure";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: azure("your-deployment-name"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="AWS"
import { bedrock } from "@ai-sdk/amazon-bedrock";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: bedrock("anthropic.claude-3-5-sonnet-20240620-v1:0"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="Gemini"
import { google } from "@ai-sdk/google";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: google("gemini-2.0-flash"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="GCP"
import { vertex } from "@ai-sdk/google-vertex";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: vertex("gemini-1.5-pro"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="Groq"
import { createOpenAI } from "@ai-sdk/openai";
import { streamText } from "ai";

export const maxDuration = 30;

const groq = createOpenAI({
  apiKey: process.env.GROQ_API_KEY ?? "",
  baseURL: "https://api.groq.com/openai/v1",
});

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: groq("llama3-70b-8192"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="Fireworks"
import { createOpenAI } from "@ai-sdk/openai";
import { streamText } from "ai";

export const maxDuration = 30;

const fireworks = createOpenAI({
  apiKey: process.env.FIREWORKS_API_KEY ?? "",
  baseURL: "https://api.fireworks.ai/inference/v1",
});

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: fireworks("accounts/fireworks/models/firefunction-v2"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="Cohere"
import { cohere } from "@ai-sdk/cohere";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: cohere("command-r-plus"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="Ollama"
import { ollama } from "ollama-ai-provider";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: ollama("llama3"),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```ts title="/app/api/chat/route.ts" tab="Chrome AI"
import { chromeai } from "chrome-ai";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: chromeai(),
    messages,
  });
  return result.toDataStreamResponse();
}
```

</Tabs>

Define environment variables:

<Tabs id="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>

```sh title="/.env.local" tab="OpenAI"
OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

```sh title="/.env.local" tab="Anthropic"
ANTHROPIC_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

```sh title="/.env.local" tab="Azure"
AZURE_RESOURCE_NAME="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
AZURE_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

```sh title="/.env.local" tab="AWS"
AWS_ACCESS_KEY_ID="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
AWS_SECRET_ACCESS_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
AWS_REGION="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

```sh title="/.env.local" tab="Gemini"
GOOGLE_GENERATIVE_AI_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

```sh title="/.env.local" tab="GCP"
GOOGLE_VERTEX_PROJECT="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
GOOGLE_VERTEX_LOCATION="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
GOOGLE_APPLICATION_CREDENTIALS="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

```sh title="/.env.local" tab="Groq"
GROQ_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

```sh title="/.env.local" tab="Fireworks"
FIREWORKS_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

```sh title="/.env.local" tab="Cohere"
COHERE_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

```sh tab="Ollama"
<none>
```

```sh tab="Chrome AI"
<none>
```

</Tabs>

If you aren't using Next.js, you can also deploy this endpoint to Cloudflare Workers, or any other serverless platform.

  </Step>

  <Step>

### Use it in your app

<Tabs items={["Thread", "AssistantModal"]}>

```tsx title="/app/page.tsx" tab="Thread"
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
import { ThreadList } from "@/components/assistant-ui/thread-list";
import { Thread } from "@/components/assistant-ui/thread";

const MyApp = () => {
  const runtime = useChatRuntime({
    api: "/api/chat",
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="grid h-dvh grid-cols-[200px_1fr] gap-x-2 px-4 py-4">
        <ThreadList />
        <Thread />
      </div>
    </AssistantRuntimeProvider>
  );
};
```

```tsx title="/app/page.tsx" tab="AssistantModal"
// run `npx shadcn@latest add "https://r.assistant-ui.com/assistant-modal"`

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
import { AssistantModal } from "@/components/assistant-ui/assistant-modal";

const MyApp = () => {
  const runtime = useChatRuntime({
    api: "/api/chat",
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <AssistantModal />
    </AssistantRuntimeProvider>
  );
};
```

</Tabs>

</Step>
</Steps>
